<template>
  <div class="icons-scroll">
    <h1 class="title">本周热门榜单</h1>
    <div class="pics" ref="picWrapper">
      <ul class="pic-list" ref="picList">
        <li class="pic-item" v-for="(item,index) in iconScroll" :key="index">
          <img :src="item.iconUrl" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'icons-scroll',
  data() {
    return {
       iconScroll:[{
        id: '001',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg'
      },{
        id: '002',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg'
      },{
        id: '003',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg'
      },{
        id: '004',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg'
      },{
        id: '005',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg'
      },{
        id: '006',
        iconUrl: 'http://img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg'
      }]
    }
  },
  watch: {
    'seller'() {
      this.$nextTick(() => {
        this._initPics()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._initPics()
    })
  },
  methods: {
      _initPics() {
        if(this.iconScroll) {
          console.log(1);
         
          let picWidth = 97
          let margin = 5
          let width = (picWidth + margin) * this.iconScroll.length - margin
          console.log(width)
          this.$refs.picList.style.width = width + 'px'
          this.$nextTick(() => {
            if(!this.picScroll) {
              this.picScroll = new BScroll(this.$refs.picWrapper, {
                scrollX: true,
                eventPassthrough: 'vertical'
              })
            }else {
              this.picScroll.refresh()
            }
          })
        }
      }
  }
}
</script>

<style lang="stylus" scoped>
  .icons-scroll
    width: 100%
    padding: .1rem 0 .1rem 0
    // border-bottom: 0.01rem solid grey 
    .title
      margin-bottom: .1rem
      text-indent: .1rem
      font-weight: bold
      line-height: .5rem
      background: #eee
    .pics
      margin-left: .1rem
      width: 100%
      height: 25vw
      overflow: hidden
      white-space nowrap
      // border-bottom: 0.01rem solid grey
      .pic-list
        font-size: 0
        .pic-item
          float: left
          width: 93.8px
          margin-right: 5px
          img
            width: 93.8px
</style>
